<template>
  <div class="page-main">
    <home-nav :userData="userinfo"></home-nav>
    <div class="banner"><span>合同报工列表</span></div>
    <div
      class="container"
      v-infinite-scroll="handleInfiniteOnLoad"
      :infinite-scroll-disabled="busy"
      :infinite-scroll-distance="20"
    >
      <div class="header">
        <a-row type="flex" justify="space-between" align="middle">
          <a-col :xl="{ span: 14 }" :lg="{ span: 11 }">
            <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange"></a-checkbox>
            <a-button class="hte-btn add-btn" type="primary" icon="plus">创建</a-button>
            <a-button class="hte-btn port-btn">导出</a-button>
            <a-button class="hte-btn del-btn" :loading="addTaskLoading">删除</a-button>
          </a-col>
          <a-col :xl="{ span: 9 }" :lg="{ span: 13 }" class="input-ground">
            <a-input-group compact>
              <a-select default-value="合同编号">
                <a-select-option value="合同编号"> 合同编号 </a-select-option>
                <a-select-option value="合同名称"> 合同名称 </a-select-option>
              </a-select>
              <a-input-search v-model="valueSearch" @search="getContarctListData" placeholder="请按照关键字进行搜索" />
            </a-input-group>
            <a-button class="hte-btn del-btn" :loading="searchLoading" @click="visibleModel=true">高级搜索</a-button>
          </a-col>
        </a-row>
      </div>
      <FixedMenu menuClass="floatNav" menuRight="-93">
      <div class="floatNav">
        <div>
          <span class="iconfont icon-reportReserve"></span>
          <a-badge count="22" :offset="[-11, -15]">
            <p>我的报工单</p>
          </a-badge>
        </div>
        <div>
          <span class="iconfont icon-reportReserve"></span>
          <a-badge count="2" :offset="[-11, -15]">
            <p>验收付款单</p>
          </a-badge>
        </div>
      </div>
      </FixedMenu>
      <a-checkbox-group @change="onChangeCheckbox" v-model="checkedList">
        <section v-for="item of contarctRepList" :key="item.id" class="section-list">
          <div class="list-head">
            <a-checkbox :value="item"></a-checkbox>
            <!-- i-unfinished未开始 i-ongoing进行中-->
            <i class="i-unfinished">未开始</i>
            <span class="title" title="HT09-cg20200025 江苏公司新办供楼饭堂家具采购补充">
              <span class="hte-text-downline" @click="handleClidk()">              
                <i>HT09-cg20200025</i>
                <span>江苏公司新办供楼饭堂家具采购补充</span>
              </span> 
            </span>            
            <span>
              <span>开始时间:<i>2021-04-27</i></span>
              <span>结束时间:<i>2022-04-27</i></span>
            </span>
          </div>
          <div class="list-content">
            <div class="flex-line-box">
              <div class="line-fir">
                <div class="line-after">签订公司:<i>佛山市海天（江苏）调味食品调味食品调味食品调味食品有限公司</i></div>
                <div>签订公司:<i>广州市都是家家具某某某有限公司</i></div>
              </div>  
              <div>
                <div>合同签订人:<i>荔枝纹</i></div>
                <div>合同跟进人:<i>饶宝芬</i></div>
                <div>项目负责人:<i>高博2</i></div>
              </div>
            </div>
            <div class="flex-line-box">
              <div class="line-fir">
                <div>合同金额:<i>99900.00</i></div>
                <div>已付金额:<i>99900.00</i></div>
                <div>采购订单号:<i>PL32356523236</i></div>
              </div>
              <div class="line-icon">
                <div><i class="iconfont icon-reportReserve"></i>报工任务单</div>
                <div><i class="iconfont icon-dingdan"></i>明细</div>
                <div><a-icon type="file" />附件</div>
              </div>
            </div>
          </div>
        </section>
      </a-checkbox-group>
      <a-empty class="empty-box" v-show="emptyFlag" />
      <div v-show="skeletonFlag">
        <a-skeleton active />
        <a-skeleton active />
        <a-skeleton active />
      </div>
      <div v-show="loaddingFlag && !busy" class="loading-container">
        <a-spin spinning :delay="10" tip="加载中" />
      </div>
      <div class="tips-box" v-show="!loaddingFlag && !emptyFlag">暂无更多数据</div>
    </div>
    <a-back-top class="backtodom" />
    <a-modal
      v-model="visibleModel"
      width="70vw"
      :bodyStyle="{ padding: '10px' }"
      title="高级搜索"
      @ok="callBackResult"
    >      
      <advanced-search :dataForm.sync="form"></advanced-search>
    </a-modal>
  </div>
</template>
<script>
import { getAction } from '@/api/manage'
import { queryWhenLeader } from '@/api/projectBuild'
export default {
  name: 'ContractReportList',
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
    AdvancedSearch: () => import('@views/workReport/page/AdvancedSearch'),
    FixedMenu: ()=> import('@/components/tools/FixedMenu'),
  },
  data() {
    return {
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'ContractReportList',
      },
      that: this,
      contarctRepList: [],
      checkedList: [],
      indeterminate: false,
      checkAll: false,
      // 查询
      valueSearch: '',
      skeletonFlag: false, // 骨架
      emptyFlag: false,
      loaddingFlag: false, // 加载中
      busy: false,
      addTaskLoading: false,
      searchLoading: false,
      total: 0,
      pageNo: 1,
      pageSize: 10,
      visibleModel: false,
      form: {},
    }
  },
  mounted() {
    this.getContarctListData()
  },
  methods: {
    /**
     * check 选中及全选
     */
    onChangeCheckbox(checkedList) {
      this.checkedList = checkedList
      this.indeterminate = !!checkedList.length && checkedList.length < this.contarctRepList.length
      this.checkAll = checkedList.length === this.contarctRepList.length
    },
    onCheckAllChange(e) {
      Object.assign(this, {
        checkedList: e.target.checked ? this.contarctRepList : [],
        indeterminate: false,
        checkAll: e.target.checked,
      })
    },
    /**
     * 查询
     */
    getContarctListData(type) {
      if (type !== 'scroll') {
        this.skeletonFlag = true
        this.emptyFlag = false
        this.pageNo = 1
        this.contarctRepList = []
      }
      queryWhenLeader({
        column: 'realLevel',
        order: 'Asc',
        pageNo: this.pageNo,
        projectClass: '',
        projectSubType: '',
        pageSize: this.pageSize,
        type: 7,
        keyword: this.valueSearch,
      }).then((res) => {
        if (res.code == 200) {
          if (res.result && res.result.records.length > 0) {
            if (type === 'scroll') {
              res.result.records = this.contarctRepList.concat(res.result.records)
              this.loaddingFlag = false // 加载中
            } else {
              this.total = res.result.total
              this.skeletonFlag = false
            }
            this.contarctRepList = res.result.records
            this.busy = false
          } else {
            if (type === 'scroll') {
              this.loaddingFlag = false // 加载中
            } else {
              this.emptyFlag = true
              this.skeletonFlag = false
            }
            this.busy = true
          }
        } else {
          this.$messageWorkReport.warning('数据加载失败:' + res.message)
        }
      })
    },
    handleInfiniteOnLoad() {
      const data = this.contarctRepList
      this.loaddingFlag = true
      if (data.length >= this.total) {
        this.busy = true
        this.loaddingFlag = false
        return
      }
      this.pageNo += 1
      this.getContarctListData('scroll')
    },
    handleChange() {},
    /**
     * 高级搜索 
     */
    callBackResult(event){
    },
    handleClidk(){}
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.page-main {
  .banner {
    background-image: url(../~@assets/contract-top.png);
  }
  /deep/ .ant-checkbox-group {width: 100%;
    section.section-list .list-content{padding: 15px 18px 5px 50px;}
  }
  /deep/ .list-head .ant-checkbox-wrapper .ant-checkbox{margin-right: 18px;}
  /deep/ .ant-col .ant-checkbox {padding: 0 19px;}        
  /deep/ .ant-checkbox-checked::after{border: none;}
}
</style>